<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理系统</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0FC6C2',
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              400: '#909399',
              500: '#606266',
              600: '#303133',
              700: '#1E1E1E',
            },
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-link {
        @apply flex items-center gap-3 px-4 py-3 text-neutral-400 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
      }
      .sidebar-link.active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .card-shadow {
        @apply shadow-[0_2px_12px_0_rgba(0,0,0,0.08)];
      }
      .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
      }
      .btn-outline {
        @apply border border-neutral-200 hover:border-primary text-neutral-600 hover:text-primary font-medium py-2 px-4 rounded-lg transition-all duration-200;
      }
    }
  </style>
</head>
<body class="bg-neutral-100 font-inter min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- 左侧Logo -->
        <div class="flex items-center">
          <div class="text-primary text-2xl font-bold">
            <i class="fa fa-building-o mr-2"></i>员工管理系统
          </div>
        </div>
        
        <!-- 右侧用户信息和退出按钮 -->
        <div class="flex items-center gap-4">
          <div class="relative">
            <button class="flex items-center gap-2 text-neutral-600 hover:text-primary transition-colors">
              <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
              <span class="hidden md:inline-block">张经理</span>
              <i class="fa fa-angle-down text-xs"></i>
            </button>
          </div>
          
          <!-- 退出登录按钮 -->
          <button id="logoutBtn" class="flex items-center gap-2 text-neutral-500 hover:text-red-500 transition-colors">
            <i class="fa fa-sign-out"></i>
            <span class="hidden md:inline-block">退出登录</span>
          </button>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区域 -->
  <main class="flex-1 flex overflow-hidden">
    <!-- 左侧边栏 -->
    <aside class="w-64 bg-white shadow-sm hidden md:block transition-all duration-300 ease-in-out">
      <nav class="py-4">
        <div class="px-4 mb-4">
          <h2 class="text-neutral-500 text-sm font-medium uppercase tracking-wider">员工管理</h2>
        </div>
        
        <ul class="space-y-1 px-2">
          <li>
            <a href="#attendance" class="sidebar-link active">
              <i class="fa fa-calendar-check-o w-5 text-center"></i>
              <span>员工考勤管理</span>
            </a>
          </li>
          <li>
            <a href="#profile" class="sidebar-link">
              <i class="fa fa-user-circle-o w-5 text-center"></i>
              <span>个人信息管理</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 主内容 -->
    <div class="flex-1 overflow-auto p-4 md:p-6">
      <div class="max-w-7xl mx-auto">
        <!-- 页面标题 -->
<!--        <div class="mb-6">-->
<!--          <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700">员工管理</h1>-->
<!--          <p class="text-neutral-500 mt-1">管理员工考勤和个人信息</p>-->
<!--        </div>-->
        
        <!-- 内容区域 -->
        <div class="grid grid-cols-1 gap-6">
          <!-- 考勤管理卡片 -->
          <div id="attendance" class="bg-white rounded-xl p-6 card-shadow">
            <div class="flex items-center justify-between mb-6">
              <h2 class="text-xl font-semibold text-neutral-700">员工考勤管理</h2>
              <div class="flex gap-2">
                <a href="add-attendance.html" class="btn-primary flex items-center gap-1">
                  <i class="fa fa-plus"></i> 添加考勤
                </a>
                <div class="relative">
                  <input type="text" placeholder="搜索员工..." class="pl-9 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                  <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                </div>
                <button class="btn-primary">
                  <i class="fa fa-filter mr-1"></i> 筛选
                </button>
              </div>
            </div>
            
            <!-- 考勤表格 -->
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-neutral-200">
                <thead>
                  <tr>
                    <th class="px-6 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">员工姓名</th>
                    <th class="px-6 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">部门</th>
                    <th class="px-6 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">日期</th>
                    <th class="px-6 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">上班时间</th>
                    <th class="px-6 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">下班时间</th>
                    <th class="px-6 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">状态</th>
                    <th class="px-6 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-neutral-200">
                  <tr class="hover:bg-neutral-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/200/200?random=2" alt="员工头像">
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-neutral-700">张三</div>
                          <div class="text-sm text-neutral-500">zhangsan@example.com</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">技术部</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">2023-06-10</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">09:05</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">18:30</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                        正常
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <a href="#" class="text-primary hover:text-primary/80 transition-colors">查看详情</a>
                    </td>
                  </tr>
                  <tr class="hover:bg-neutral-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/200/200?random=3" alt="员工头像">
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-neutral-700">李四</div>
                          <div class="text-sm text-neutral-500">lisi@example.com</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">市场部</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">2023-06-10</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">09:30</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">18:15</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                        迟到
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <a href="#" class="text-primary hover:text-primary/80 transition-colors">查看详情</a>
                    </td>
                  </tr>
                  <tr class="hover:bg-neutral-50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                          <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/200/200?random=4" alt="员工头像">
                        </div>
                        <div class="ml-4">
                          <div class="text-sm font-medium text-neutral-700">王五</div>
                          <div class="text-sm text-neutral-500">wangwu@example.com</div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">人力资源部</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">2023-06-10</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">08:55</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <div class="text-sm text-neutral-700">19:00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                        正常
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <a href="#" class="text-primary hover:text-primary/80 transition-colors">查看详情</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- 分页 -->
            <div class="flex items-center justify-between px-4 py-3 sm:px-6 mt-4">
              <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                  <p class="text-sm text-neutral-700">
                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 条，共 <span class="font-medium">12</span> 条结果
                  </p>
                </div>
                <div>
                  <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                      <span class="sr-only">上一页</span>
                      <i class="fa fa-chevron-left text-xs"></i>
                    </a>
                    <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">
                      1
                    </a>
                    <a href="#" class="bg-white border-neutral-300 text-neutral-500 hover:bg-neutral-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                      2
                    </a>
                    <a href="#" class="bg-white border-neutral-300 text-neutral-500 hover:bg-neutral-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                      3
                    </a>
                    <span class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700">
                      ...
                    </span>
                    <a href="#" class="bg-white border-neutral-300 text-neutral-500 hover:bg-neutral-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                      4
                    </a>
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50">
                      <span class="sr-only">下一页</span>
                      <i class="fa fa-chevron-right text-xs"></i>
                    </a>
                  </nav>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 个人信息管理卡片 -->
          <div id="profile" class="bg-white rounded-xl p-6 card-shadow hidden">
            <div class="flex items-center justify-between mb-6">
              <h2 class="text-xl font-semibold text-neutral-700">个人信息管理</h2>
              <button id="saveProfileBtn" class="btn-primary">
                <i class="fa fa-save mr-1"></i> 保存修改
              </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <!-- 左侧头像上传区域 -->
              <div class="md:col-span-1">
                <div class="bg-neutral-50 rounded-lg p-6 text-center">
                  <h3 class="text-lg font-medium text-neutral-700 mb-4">个人头像</h3>
                  <div class="relative w-40 h-40 mx-auto mb-4">
                    <img id="avatarPreview" src="https://picsum.photos/200/200?random=5" alt="个人头像" class="w-full h-full object-cover rounded-full border-4 border-white shadow-md">
                    <label for="avatarUpload" class="absolute bottom-0 right-0 bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center cursor-pointer shadow-lg hover:bg-primary/90 transition-colors">
                      <i class="fa fa-camera"></i>
                      <input id="avatarUpload" type="file" accept="image/*" class="hidden">
                    </label>
                  </div>
                  <p class="text-sm text-neutral-500 mb-4">点击相机图标上传新头像</p>
                  <button id="removeAvatarBtn" class="text-sm text-red-500 hover:text-red-600 transition-colors flex items-center justify-center mx-auto">
                    <i class="fa fa-trash-o mr-1"></i> 移除头像
                  </button>
                </div>
              </div>
              
              <!-- 右侧个人信息表单 -->
              <div class="md:col-span-2">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div class="space-y-2">
                    <label for="username" class="block text-sm font-medium text-neutral-700">用户名</label>
                    <input type="text" id="username" name="username" value="zhang_manager" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                  </div>
                  
                  <div class="space-y-2">
                    <label for="realName" class="block text-sm font-medium text-neutral-700">姓名</label>
                    <input type="text" id="realName" name="realName" value="张经理" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                  </div>
                  
                  <div class="space-y-2">
                    <label for="email" class="block text-sm font-medium text-neutral-700">邮箱</label>
                    <input type="email" id="email" name="email" value="zhang@example.com" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                  </div>
                  
                  <div class="space-y-2">
                    <label for="phone" class="block text-sm font-medium text-neutral-700">手机号</label>
                    <input type="tel" id="phone" name="phone" value="13800138000" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                  </div>
                  
                  <div class="space-y-2 md:col-span-2">
                    <label for="department" class="block text-sm font-medium text-neutral-700">部门</label>
                    <select id="department" name="department" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                      <option value="tech">技术部</option>
                      <option value="market">市场部</option>
                      <option value="hr">人力资源部</option>
                      <option value="finance">财务部</option>
                    </select>
                  </div>
                  
                  <div class="space-y-2 md:col-span-2">
                    <label for="position" class="block text-sm font-medium text-neutral-700">职位</label>
                    <input type="text" id="position" name="position" value="技术经理" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                  </div>
                  
                  <div class="space-y-2 md:col-span-2">
                    <label for="introduction" class="block text-sm font-medium text-neutral-700">个人简介</label>
                    <textarea id="introduction" name="introduction" rows="3" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">负责技术团队和管理项目规划，有丰富的软件开发经验。</textarea>
                  </div>
                </div>
                
                <!-- 密码修改区域 -->
                <div class="mt-8">
                  <h3 class="text-lg font-medium text-neutral-700 mb-4">账户安全</h3>
                  <button id="changePasswordBtn" class="btn-outline flex items-center">
                    <i class="fa fa-lock mr-2"></i> 修改密码
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-neutral-200 py-4">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="text-neutral-500 text-sm mb-4 md:mb-0">
          © 2023 员工管理系统 版权所有
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
            <i class="fa fa-question-circle mr-1"></i> 帮助中心
          </a>
          
          <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
            <i class="fa fa-shield mr-1"></i> 隐私政策
          </a>
        </div>
      </div>
    </div>
  </footer>

  <!-- 修改密码模态框 -->
  <div id="changePasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4 shadow-xl transform transition-all">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-semibold text-neutral-700">修改密码</h3>
        <button id="closePasswordModal" class="text-neutral-400 hover:text-neutral-600 transition-colors">
          <i class="fa fa-times text-xl"></i>
        </button>
      </div>
      
      <form id="changePasswordForm" class="space-y-4">
        <div class="space-y-2">
          <label for="oldPassword" class="block text-sm font-medium text-neutral-700">当前密码</label>
          <input type="password" id="oldPassword" name="oldPassword" placeholder="输入当前密码" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
        </div>
        
        <div class="space-y-2">
          <label for="newPassword" class="block text-sm font-medium text-neutral-700">新密码</label>
          <input type="password" id="newPassword" name="newPassword" placeholder="输入新密码" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
        </div>
        
        <div class="space-y-2">
          <label for="confirmPassword" class="block text-sm font-medium text-neutral-700">确认新密码</label>
          <input type="password" id="confirmPassword" name="confirmPassword" placeholder="再次输入新密码" class="w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
        </div>
        
        <div class="flex justify-end space-x-3 pt-4">
          <button type="button" id="cancelPasswordChange" class="btn-outline">
            取消
          </button>
          <button type="submit" class="btn-primary">
            <i class="fa fa-check mr-1"></i> 确认修改
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 登录页面模态框 -->
  <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 shadow-xl transform transition-all">
      <div class="text-center mb-6">
        <h2 class="text-2xl font-bold text-neutral-700">员工管理系统</h2>
        <p class="text-neutral-500 mt-1">请登录以继续</p>
      </div>
      
      <form>
        <div class="space-y-4">
          <div>
            <label for="loginUsername" class="block text-sm font-medium text-neutral-700 mb-1">用户名</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-user text-neutral-400"></i>
              </div>
              <input type="text" id="loginUsername" name="loginUsername" placeholder="请输入用户名" class="pl-10 block w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
            </div>
          </div>
          
          <div>
            <label for="loginPassword" class="block text-sm font-medium text-neutral-700 mb-1">密码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fa fa-lock text-neutral-400"></i>
              </div>
              <input type="password" id="loginPassword" name="loginPassword" placeholder="请输入密码" class="pl-10 block w-full px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
            </div>
          </div>
          
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="rememberMe" name="rememberMe" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-neutral-300 rounded">
              <label for="rememberMe" class="ml-2 block text-sm text-neutral-700">记住我</label>
            </div>
            <div class="text-sm">
              <a href="#" class="font-medium text-primary hover:text-primary/80 transition-colors">忘记密码?</a>
            </div>
          </div>
          
          <button type="button" id="loginBtn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 flex items-center justify-center">
            <i class="fa fa-sign-in mr-2"></i> 登录
          </button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- 考勤详情模态框 -->
  <div id="attendanceDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4 shadow-xl transform transition-all">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-xl font-semibold text-neutral-700">考勤详情</h3>
        <button id="closeAttendanceDetailModal" class="text-neutral-400 hover:text-neutral-600 transition-colors">
          <i class="fa fa-times text-xl"></i>
        </button>
      </div>
      
      <div id="attendanceDetailContent" class="space-y-4">
        <!-- 考勤详情内容将通过JavaScript动态填充 -->
      </div>
      
      <div class="flex justify-end space-x-3 pt-4 mt-4 border-t border-neutral-200">
        <button type="button" id="closeAttendanceDetailBtn" class="btn-primary">
          <i class="fa fa-check mr-1"></i> 确定
        </button>
      </div>
    </div>
  </div>

  <script>
    // 全局变量
    let attendanceData = [];
    // 初始化默认部门数据
    let departmentData = [
      { positionId: 1, positionName: '技术部' },
      { positionId: 2, positionName: '市场部' },
      { positionId: 3, positionName: '人力资源部' },
      { positionId: 4, positionName: '财务部' }
    ];
    let currentPage = 1;
    const pageSize = 5;
   
    
    // 初始化页面数据
    function initPageData() {
      console.log('初始化页面数据...');
      // 加载考勤数据
      loadAttendanceData();
      // 加载部门数据
      loadDepartmentData();
      // 加载用户信息
      loadUserInfo();
    }
    
    // 页面初始化
    document.addEventListener('DOMContentLoaded', function() {
      const navLinks = document.querySelectorAll('.sidebar-link');
      const contentSections = document.querySelectorAll('#attendance, #profile');
      
      // 初始化页面数据
      initPageData();
      
      // 搜索功能
      const searchInput = document.querySelector('input[placeholder="搜索员工..."]');
      searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        filterAttendanceData(searchTerm);
      });
      
      // 筛选按钮点击事件
      const filterBtn = document.querySelector('.btn-primary i.fa-filter').parentElement;
      filterBtn.addEventListener('click', function() {
        // 这里可以实现更复杂的筛选功能，如弹出筛选选项等
        alert('筛选功能待实现');
      });
      navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          
          // 更新导航栏激活状态
          navLinks.forEach(l => l.classList.remove('active'));
          this.classList.add('active');
          
          // 显示对应的内容区域
          const targetId = this.getAttribute('href').substring(1);
          contentSections.forEach(section => {
            section.classList.add('hidden');
          });
          document.getElementById(targetId).classList.remove('hidden');
        });
      });
      
      // 退出登录功能
      const logoutBtn = document.getElementById('logoutBtn');
      
      logoutBtn.addEventListener('click', function() {
        // 获取token
        const token = localStorage.getItem('token');
        
        if (token) {
          // 调用后端登出接口
          fetch('/api/auth/logout', {
            method: 'POST',
            headers: {
              'Authorization': 'Bearer ' + token,
              'Content-Type': 'application/json'
            }
          })
          .then(response => response.json())
          .then(data => {
            console.log('登出结果:', data);
            // 无论后端返回成功或失败，都清除本地token并跳转到登录页
          })
          .catch(error => {
            console.error('登出请求出错:', error);
            // 即使请求失败，也清除本地token并跳转到登录页
          })
          .finally(() => {
            // 清除localStorage中的token
            localStorage.removeItem('token');
            // 跳转到登录页面
            window.location.href = '/index.html';
          });
        } else {
          // 如果没有token，直接跳转到登录页
          window.location.href = '/index.html';
        }
      });
      
      // 头像上传预览功能
      const avatarUpload = document.getElementById('avatarUpload');
      const avatarPreview = document.getElementById('avatarPreview');
      const removeAvatarBtn = document.getElementById('removeAvatarBtn');
      
      avatarUpload.addEventListener('change', function() {
        if (this.files && this.files[0]) {
          const reader = new FileReader();
          
          reader.onload = function(e) {
            avatarPreview.src = e.target.result;
          }
          
          reader.readAsDataURL(this.files[0]);
        }
      });
      
      removeAvatarBtn.addEventListener('click', function() {
        avatarPreview.src = 'https://picsum.photos/200/200?random=default';
        avatarUpload.value = '';
      });
      
      // 修改密码模态框功能
      const changePasswordBtn = document.getElementById('changePasswordBtn');
      const changePasswordModal = document.getElementById('changePasswordModal');
      const closePasswordModal = document.getElementById('closePasswordModal');
      const cancelPasswordChange = document.getElementById('cancelPasswordChange');
      const changePasswordForm = document.getElementById('changePasswordForm');
      
      // 打开修改密码模态框
      changePasswordBtn.addEventListener('click', function() {
        changePasswordModal.classList.remove('hidden');
        // 重置表单
        changePasswordForm.reset();
      });
      
      // 关闭修改密码模态框
      function closeModal() {
        changePasswordModal.classList.add('hidden');
      }
      
      closePasswordModal.addEventListener('click', closeModal);
      cancelPasswordChange.addEventListener('click', closeModal);
      
      // 点击模态框外部关闭
      changePasswordModal.addEventListener('click', function(e) {
        if (e.target === this) {
          closeModal();
        }
      });
      
      // 处理修改密码表单提交
      changePasswordForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;
        
        // 表单验证
        if (!oldPassword || !newPassword || !confirmPassword) {
          alert('请填写所有密码字段');
          return;
        }
        
        if (newPassword !== confirmPassword) {
          alert('新密码与确认密码不匹配');
          return;
        }
        
        // 这里可以添加密码强度验证
        if (newPassword.length < 6) {
          alert('新密码长度不能少于6个字符');
          return;
        }
        
        // 发送修改密码请求到后端
        // 这里是模拟请求，实际项目中应该调用API
        setTimeout(function() {
          alert('密码修改成功！');
          closeModal();
        }, 1000);
      });
    });
    
    // 加载考勤数据
    function loadAttendanceData() {
      // 显示加载中状态
      const tableBody = document.querySelector('#attendance table tbody');
      tableBody.innerHTML = '<tr><td colspan="7" class="px-6 py-4 text-center">加载中...</td></tr>';
      
      console.log('开始加载考勤数据...');
      
      // 获取token
      const token = localStorage.getItem('token');
      
      // 发起API请求获取考勤数据
      fetch('/attendances', {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应不正常');
        }
        return response.json();
      })
      .then(data => {
        console.log('收到考勤数据响应:', data);
        
        // 处理不同格式的响应数据
        if (data && data.result === 'success' && Array.isArray(data.data)) {
          // 接口返回的标准格式：{result: 'success', message: '查询成功', data: [...]}
          attendanceData = data.data;
        } else if (data && data.status === 'success' && Array.isArray(data.data)) {
          // 标准格式：{status: 'success', data: [...]}
          attendanceData = data.data;
        } else if (data && data.data && Array.isArray(data.data)) {
          attendanceData = data.data;
        } else if (data && Array.isArray(data)) {
          // 直接返回数组
          attendanceData = data;
        } else if (data && typeof data === 'object') {
          // 尝试从对象中提取数组数据
          const possibleArrayData = Object.values(data).find(value => Array.isArray(value));
          if (possibleArrayData) {
            attendanceData = possibleArrayData;
          } else {
            // 如果找不到数组，尝试将对象转换为数组
            const dataArray = Object.values(data).filter(item => 
              item && typeof item === 'object' && (item.id || item.employeeId)
            );
            if (dataArray.length > 0) {
              attendanceData = dataArray;
            } else {
              throw new Error('无法从响应中提取考勤数据');
            }
          }
        } else {
          throw new Error(data.message || '获取考勤数据失败');
        }
        
        console.log('考勤数据加载成功:', attendanceData);
        
        // 渲染第一页数据
        renderAttendanceData(attendanceData, currentPage);
        // 更新分页信息
        updatePagination(attendanceData.length);
      })
      .catch(error => {
        console.error('获取考勤数据出错:', error);
        // 显示错误信息
        tableBody.innerHTML = `<tr><td colspan="7" class="px-6 py-4 text-center text-red-500">获取数据失败: ${error.message}</td></tr>`;
        
        // 如果是演示环境，加载模拟数据
        console.log('使用模拟考勤数据');
        loadMockData();
      });
    }
    
    // 加载模拟数据（当API请求失败时使用）
    function loadMockData() {
      console.log('加载模拟考勤数据...');
      // 使用全局定义的模拟考勤数据
      if (mockData && mockData.length > 0) {
        console.log('模拟数据可用，共', mockData.length, '条记录');
        // 保存考勤数据
        attendanceData = mockData;
        // 渲染第一页数据
        renderAttendanceData(attendanceData, currentPage);
        // 更新分页信息
        updatePagination(attendanceData.length);
      } else {
        console.error('模拟数据不可用');
        const tableBody = document.querySelector('#attendance table tbody');
        tableBody.innerHTML = '<tr><td colspan="7" class="px-6 py-4 text-center text-red-500">无法加载考勤数据</td></tr>';
      }
    }
    
    // 渲染考勤数据到表格
    function renderAttendanceData(data, page) {
      console.log('渲染考勤数据，页码:', page, '数据长度:', data.length);
      const tableBody = document.querySelector('#attendance table tbody');
      tableBody.innerHTML = '';
      
      // 计算当前页的数据范围
      const start = (page - 1) * pageSize;
      const end = Math.min(start + pageSize, data.length);
      const pageData = data.slice(start, end);
      
      if (pageData.length === 0) {
        tableBody.innerHTML = '<tr><td colspan="7" class="px-6 py-4 text-center">没有找到考勤记录</td></tr>';
        return;
      }
      
      console.log('当前页数据:', pageData);
      
      // 生成表格行
      pageData.forEach((item, index) => {
        try {
          // 安全获取数据，防止undefined或null导致错误
          console.log(item);

          const employeeId = item.employeeId || '未知';
          const nickName = item.nickName || '未知姓名';
          // 修改头像URL构建逻辑，适配新的图片访问路径
          let avator;
          if (item.avator) {
            // 检查头像路径是否已经是新格式（以/files/avatar/view/开头）
            if (item.avator.startsWith('/files/avatar/view/')) {
              avator = `http://127.0.0.1:8080${item.avator}`;
            } else {
              // 兼容旧格式路径
              avator = `http://127.0.0.1:8080/${item.avator.replace("static", "")}`;
            }
          } else {
            avator = `https://picsum.photos/200/200?random=${index + 2}`;
          }
          const department = item.department || '未知部门';
          const attendanceDate = item.attendanceDate || '未记录';
          const status = item.status || '未知';
          const id = item.id || index;
          
          // 安全处理时间格式
          let clockInTime = '未记录';
          let clockOutTime = '未记录';
          
          if (item.clockInTime && typeof item.clockInTime === 'string') {
            clockInTime = item.clockInTime.substring(0, 5);
          }
          
          if (item.clockOutTime && typeof item.clockOutTime === 'string') {
            clockOutTime = item.clockOutTime.substring(0, 5);
          }
          
          const statusClass = getStatusClass(status);
          
          const row = `
            <tr class="hover:bg-neutral-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <img class="h-10 w-10 rounded-full object-cover" src="${avator}" alt="员工头像">
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-neutral-700">${nickName}</div>
                    <div class="text-sm text-neutral-500">员工ID: ${employeeId}</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-neutral-700">${department}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-neutral-700">${attendanceDate}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-neutral-700">${clockInTime}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-neutral-700">${clockOutTime}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
                  ${status}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <a href="#" class="text-primary hover:text-primary/80 transition-colors" data-id="${id}">查看详情</a>
              </td>
            </tr>
          `;
          
          tableBody.innerHTML += row;
        } catch (error) {
          console.error('渲染行数据出错:', error, '数据项:', item);
        }
      });
      
      // 添加详情查看事件
      addDetailViewEvents();
    }
    
    // 为考勤详情查看链接添加事件监听器
    function addDetailViewEvents() {
      document.querySelectorAll('#attendance table tbody a[data-id]').forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const id = this.getAttribute('data-id');
          viewAttendanceDetail(id);
        });
      });
    }
    
    // 根据状态获取对应的CSS类
    function getStatusClass(status) {
      switch (status) {
        case '正常':
          return 'bg-green-100 text-green-800';
        case '迟到':
          return 'bg-yellow-100 text-yellow-800';
        case '早退':
          return 'bg-orange-100 text-orange-800';
        case '缺勤':
          return 'bg-red-100 text-red-800';
        default:
          return 'bg-gray-100 text-gray-800';
      }
    }
    
    // 更新分页信息和控件
    function updatePagination(totalItems) {
      const totalPages = Math.ceil(totalItems / pageSize);
      
      // 更新显示信息
      const infoText = document.querySelector('#attendance p.text-sm.text-neutral-700');
      const start = (currentPage - 1) * pageSize + 1;
      const end = Math.min(start + pageSize - 1, totalItems);
      infoText.innerHTML = `显示 <span class="font-medium">${start}</span> 到 <span class="font-medium">${end}</span> 条，共 <span class="font-medium">${totalItems}</span> 条结果`;
      
      // 更新分页控件
      const paginationNav = document.querySelector('#attendance nav[aria-label="Pagination"]');
      let paginationHTML = `
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50 ${currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''}" ${currentPage === 1 ? 'aria-disabled="true"' : 'data-page="prev"'}>
          <span class="sr-only">上一页</span>
          <i class="fa fa-chevron-left text-xs"></i>
        </a>
      `;
      
      // 生成页码按钮
      for (let i = 1; i <= totalPages; i++) {
        if (i === currentPage) {
          paginationHTML += `
            <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">
              ${i}
            </a>
          `;
        } else if (i <= 3 || i === totalPages || Math.abs(i - currentPage) <= 1) {
          paginationHTML += `
            <a href="#" data-page="${i}" class="bg-white border-neutral-300 text-neutral-500 hover:bg-neutral-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              ${i}
            </a>
          `;
        } else if (i === 4 && totalPages > 5) {
          paginationHTML += `
            <span class="relative inline-flex items-center px-4 py-2 border border-neutral-300 bg-white text-sm font-medium text-neutral-700">
              ...
            </span>
          `;
        }
      }
      
      paginationHTML += `
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-300 bg-white text-sm font-medium text-neutral-500 hover:bg-neutral-50 ${currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : ''}" ${currentPage === totalPages ? 'aria-disabled="true"' : 'data-page="next"'}>
          <span class="sr-only">下一页</span>
          <i class="fa fa-chevron-right text-xs"></i>
        </a>
      `;
      
      paginationNav.innerHTML = paginationHTML;
      
      // 添加分页事件
      document.querySelectorAll('#attendance nav[aria-label="Pagination"] a[data-page]').forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const page = this.getAttribute('data-page');
          
          if (page === 'prev') {
            if (currentPage > 1) {
              currentPage--;
            }
          } else if (page === 'next') {
            if (currentPage < totalPages) {
              currentPage++;
            }
          } else {
            currentPage = parseInt(page);
          }
          
          renderAttendanceData(attendanceData, currentPage);
          updatePagination(totalItems);
        });
      });
    }
    
    // 根据搜索词过滤考勤数据
    function filterAttendanceData(searchTerm) {
      if (!searchTerm) {
        // 如果搜索词为空，显示所有数据
        renderAttendanceData(attendanceData, 1);
        updatePagination(attendanceData.length);
        return;
      }
      
      // 过滤数据
      const filteredData = attendanceData.filter(item => {
        const fullName = item.lastName + item.firstName;
        return fullName.toLowerCase().includes(searchTerm) || 
               String(item.employeeId).includes(searchTerm) ||
               item.status.toLowerCase().includes(searchTerm);
      });
      
      // 重置到第一页并显示过滤后的数据
      currentPage = 1;
      renderAttendanceData(filteredData, currentPage);
      updatePagination(filteredData.length);
    }
    
    // 查看考勤详情
    function viewAttendanceDetail(id) {
      // 查找对应ID的考勤记录
      const attendance = attendanceData.find(item => item.id == id);
      
      if (!attendance) {
        alert('未找到考勤记录');
        return;
      }
      
      // 格式化时间显示
      let clockInTime = attendance.clockInTime || '未记录';
      let clockOutTime = attendance.clockOutTime || '未记录';
      
      if (typeof clockInTime === 'string' && clockInTime.length > 5) {
        clockInTime = clockInTime.substring(0, 5);
      }
      
      if (typeof clockOutTime === 'string' && clockOutTime.length > 5) {
        clockOutTime = clockOutTime.substring(0, 5);
      }
      
      // 填充模态框内容
      const detailContent = document.getElementById('attendanceDetailContent');
      detailContent.innerHTML = `
        <div class="grid grid-cols-1 gap-4">
          <div class="flex items-center">
            <div class="flex-shrink-0 h-16 w-16">
              <img class="h-16 w-16 rounded-full object-cover" src="${attendance.avator ? `http://127.0.0.1:8080/${attendance.avator.replace("static", "")}` : `https://picsum.photos/200/200?random=${attendance.id}`}" alt="员工头像">
            </div>
            <div class="ml-4">
              <div class="text-lg font-medium text-neutral-700">${attendance.nickName || '未知姓名'}</div>
              <div class="text-sm text-neutral-500">员工ID: ${attendance.employeeId || '未知'}</div>
              <div class="text-sm text-neutral-500">部门: ${attendance.department || '未知部门'}</div>
            </div>
          </div>
          
          <div class="bg-neutral-50 p-4 rounded-lg">
            <h4 class="text-sm font-medium text-neutral-700 mb-2">考勤信息</h4>
            <div class="grid grid-cols-2 gap-2 text-sm">
              <div>
                <span class="text-neutral-500">考勤日期:</span>
                <span class="text-neutral-700 ml-1">${attendance.attendanceDate || '未记录'}</span>
              </div>
              <div>
                <span class="text-neutral-500">考勤状态:</span>
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusClass(attendance.status)} ml-1">${attendance.status || '未知'}</span>
              </div>
              <div>
                <span class="text-neutral-500">上班时间:</span>
                <span class="text-neutral-700 ml-1">${clockInTime}</span>
              </div>
              <div>
                <span class="text-neutral-500">下班时间:</span>
                <span class="text-neutral-700 ml-1">${clockOutTime}</span>
              </div>
            </div>
          </div>
          
          <div>
            <h4 class="text-sm font-medium text-neutral-700 mb-2">备注</h4>
            <p class="text-sm text-neutral-600 bg-white border border-neutral-200 rounded-lg p-3">${attendance.remark || '无备注'}</p>
          </div>
        </div>
      `;
      
      // 显示模态框
      const modal = document.getElementById('attendanceDetailModal');
      modal.classList.remove('hidden');
      
      // 添加关闭模态框的事件
      const closeModalBtn = document.getElementById('closeAttendanceDetailModal');
      const closeDetailBtn = document.getElementById('closeAttendanceDetailBtn');
      
      function closeDetailModal() {
        modal.classList.add('hidden');
      }
      
      closeModalBtn.addEventListener('click', closeDetailModal);
      closeDetailBtn.addEventListener('click', closeDetailModal);
      
      // 点击模态框外部关闭
      modal.addEventListener('click', function(e) {
        if (e.target === this) {
          closeDetailModal();
        }
      });
    }
    
    // 加载部门数据
    function loadDepartmentData() {
      // 获取token
      const token = localStorage.getItem('token');
      
      console.log('开始加载部门数据...');
      
      // 发起API请求获取部门数据
      fetch('/positions', {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应不正常');
        }
        return response.json();
      })
      .then(data => {
        console.log('收到部门数据响应:', data);
        
        try {
          // 处理不同格式的响应数据
          if (data && data.result === 'success' && Array.isArray(data.data)) {
            // 接口返回的标准格式：{result: 'success', message: '查询成功', data: [...]}
            departmentData = data.data.filter(item => item.positionId && item.positionName);
          } else if (data && data.status === 'success' && Array.isArray(data.data)) {
            // 标准格式：{status: 'success', data: [...]}
            departmentData = data.data.filter(item => item.positionId && item.positionName);
          } else if (data && data.data && Array.isArray(data.data)) {
            departmentData = data.data.filter(item => item.positionId && item.positionName);
          } else if (data && Array.isArray(data)) {
            // 直接返回数组
            departmentData = data.filter(item => item.positionId && item.positionName);
          } else if (data && typeof data === 'object') {
            // 尝试从对象中提取数组数据
            const possibleArrayData = Object.values(data).find(value => Array.isArray(value));
            if (possibleArrayData) {
              departmentData = possibleArrayData.filter(item => item.positionId && item.positionName);
            } else {
              // 如果找不到数组，尝试将对象转换为数组
              const dataArray = Object.entries(data).map(([key, value]) => {
                if (typeof value === 'object' && value !== null) {
                  return { positionId: key, positionName: value.name || value.positionName || key };
                }
                return { positionId: key, positionName: value };
              });
              
              if (dataArray.length > 0) {
                departmentData = dataArray.filter(item => item.positionId && item.positionName);
              } else {
                console.warn('无法从响应中提取部门数据，使用默认数据');
              }
            }
          } else {
            throw new Error(data.message || '获取部门数据失败');
          }
          
          if (!departmentData || departmentData.length === 0) {
            console.warn('未能提取有效的部门数据，使用默认数据');
            departmentData = [
              { positionId: '1', positionName: '技术部' },
              { positionId: '2', positionName: '人事部' },
              { positionId: '3', positionName: '人力资源部' },
              { positionId: '4', positionName: '市场部' },
              { positionId: '5', positionName: '运营部' }
            ];
          }
          
          console.log('部门数据加载成功:', departmentData);
          
          // 部门数据加载成功后，重新渲染考勤数据以显示正确的部门名称
          if (attendanceData && attendanceData.length > 0) {
            renderAttendanceData(attendanceData, currentPage);
          }
        } catch (error) {
          console.error('处理部门数据出错:', error);
          // 使用默认部门数据
          departmentData = [
            { positionId: '1', positionName: '技术部' },
            { positionId: '2', positionName: '人事部' },
            { positionId: '3', positionName: '人力资源部' },
            { positionId: '4', positionName: '市场部' },
            { positionId: '5', positionName: '运营部' }
          ];
        }
      })
      .catch(error => {
        console.error('获取部门数据出错:', error);
        // 使用默认部门数据（已在全局变量中初始化）
        console.log('使用默认部门数据:', departmentData);
      });
    }
    
    
   </script>
 </body>
</html>

    // 加载用户信息
    function loadUserInfo() {
      // 获取token
      const token = localStorage.getItem('token');
      
      console.log('开始加载用户信息...');
      
      // 发起API请求获取用户信息
      fetch('/auth/info', {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应不正常');
        }
        return response.json();
      })
      .then(data => {
        console.log('收到用户信息响应:', data);
        // 更新页面上的用户名显示
        if (data && data.data) {
          const userInfo = data.data;
          // 获取显示用户名的元素
          const userNameElement = document.querySelector('.flex.items-center.gap-2.text-neutral-600 span');
          if (userNameElement) {
            // 优先使用lastName + firstName，如果没有则使用username
            if (userInfo.lastName && userInfo.firstName) {
              userNameElement.textContent = userInfo.lastName + userInfo.firstName;
            } else if (userInfo.username) {
              userNameElement.textContent = userInfo.username;
            }
          }
          
          // 填充个人信息表单
          const usernameInput = document.getElementById('username');
          const realNameInput = document.getElementById('realName');
          const emailInput = document.getElementById('email');
          const phoneInput = document.getElementById('phone');
          const departmentSelect = document.getElementById('department');
          const positionInput = document.getElementById('position');
          const introductionInput = document.getElementById('introduction');
          const avatarPreview = document.getElementById('avatarPreview');
          
          if (usernameInput && userInfo.username) {
            usernameInput.value = userInfo.username;
          }
          
          if (realNameInput) {
            if (userInfo.lastName && userInfo.firstName) {
              realNameInput.value = userInfo.lastName + userInfo.firstName;
            } else if (userInfo.username) {
              realNameInput.value = userInfo.username;
            }
          }
          
          if (emailInput && userInfo.email) {
            emailInput.value = userInfo.email;
          }
          
          if (phoneInput && userInfo.phoneNumber) {
            phoneInput.value = userInfo.phoneNumber;
          }
          
          // 设置部门下拉框的值
          if (departmentSelect && userInfo.departmentId) {
            // 根据部门ID设置选择值
            switch(userInfo.departmentId) {
              case 1:
                departmentSelect.value = 'tech';
                break;
              case 2:
                departmentSelect.value = 'market';
                break;
              case 3:
                departmentSelect.value = 'hr';
                break;
              case 4:
                departmentSelect.value = 'finance';
                break;
              default:
                // 默认选择第一个选项
                departmentSelect.selectedIndex = 0;
            }
          }
          
          // 设置职位
          if (positionInput && userInfo.position) {
            positionInput.value = userInfo.position;
          }
          
          // 设置个人简介
          if (introductionInput && userInfo.introduction) {
            introductionInput.value = userInfo.introduction;
          }
          
          // 如果有头像，更新头像预览
          if (avatarPreview && userInfo.avator) {
            avatarPreview.src = userInfo.avator.startsWith('http') 
              ? userInfo.avator 
              : `http://127.0.0.1:8080/${userInfo.avator.replace("static", "")}`;
          }

          // 更新顶部导航栏的用户头像
          const headerAvatar = document.querySelector('header .flex.items-center.gap-2 img');
          if (headerAvatar && userInfo.avator) {
            headerAvatar.src = userInfo.avator.startsWith('http') 
              ? userInfo.avator 
              : `http://127.0.0.1:8080/${userInfo.avator.replace("static", "")}`;
          }
        }
      })
      .catch(error => {
        console.error('获取用户信息出错:', error);
      });
    }
    
    // 更新用户信息
    document.getElementById('saveProfileBtn').addEventListener('click', function() {
      // 获取表单数据
      const username = document.getElementById('username').value;
      const realName = document.getElementById('realName').value;
      const email = document.getElementById('email').value;
      const phone = document.getElementById('phone').value;
      const department = document.getElementById('department').value;
      const position = document.getElementById('position').value;
      const introduction = document.getElementById('introduction').value;
      
      // 表单验证
      if (!username || !realName || !email || !phone) {
        alert('请填写必要的个人信息字段');
        return;
      }
      
      // 简单的邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(email)) {
        alert('请输入有效的邮箱地址');
        return;
      }
      
      // 获取头像数据
      const avatarPreview = document.getElementById('avatarPreview');
      const avatarData = avatarPreview.src;
      
      // 获取token
      const token = localStorage.getItem('token');
      
      // 首先获取当前用户信息，以获取用户ID
      fetch('/auth/info', {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('获取用户信息失败');
        }
        return response.json();
      })
      .then(data => {
        console.log('获取到的用户信息:', data);
        if (data.result !== 'SUCCESS' || !data.data) {
          throw new Error(data.message || '获取用户信息失败');
        }
        
        const userId = data.data.employeeId;
        
        // 解析姓和名
        const nameParts = realName.split(' ');
        let firstName = '';
        let lastName = '';
        
        if (nameParts.length > 1) {
          // 如果有空格，假设格式是「姓 名」
          lastName = nameParts[0];
          firstName = nameParts.slice(1).join(' ');
        } else {
          // 如果没有空格，假设中文名，第一个字是姓，其余是名
          lastName = realName.charAt(0);
          firstName = realName.substring(1);
        }
        
        // 将部门值转换为部门ID
        let departmentId = data.data.departmentId; // 默认保持原值
        // 根据选择的部门值设置部门ID
        if (department === 'tech') departmentId = 1;
        else if (department === 'market') departmentId = 2;
        else if (department === 'hr') departmentId = 3;
        else if (department === 'finance') departmentId = 4;
        
        // 构建符合后端Employee实体的数据结构
        const employeeData = {
          employeeId: userId,
          first_name: firstName,
          last_name: lastName,
          email: email,
          phone_number: phone,
          username: username,
          introduction: introduction,
          // 保留原有的其他字段值
          position_id: data.data.positionId, // 使用原有的职位ID
          department_id: departmentId, // 使用转换后的部门ID
          // 注意：不修改密码、角色ID等敏感字段
          password: data.data.password // 保持原密码不变
        };
        
        console.log('更新的用户数据:', employeeData);
        
        // 调用更新API
        return fetch(`/employees/${userId}`, {
          method: 'PUT', // 使用PUT方法而不是POST方法
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(employeeData)
        });
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('网络响应不正常');
        }
        return response.json();
      })
      .then(result => {
        console.log('保存结果:', result);
        alert('个人信息保存成功！');
      })
      .catch(error => {
        console.error('保存个人信息出错:', error);
        alert(`保存失败: ${error.message}`);
      });